<script setup>
import {ref} from "vue";

const images = ref([
  { src: require('@/assets/imgs/carousel5.jpg'), alt: 'Image 3' },
  { src: require('@/assets/imgs/carousel6.jpg'), alt: 'Image 2' },
  { src: require('@/assets/imgs/carousel7.jpg'), alt: 'Image 1' },
  { src: require('@/assets/imgs/carousel4.png'), alt: 'Image 4' }
]);
function handleImageLoad(index) { /* ... */ }
function handleImageError(index) { /* ... */ }
</script>

<template>
  <div class="pics">
<!-- 轮播图-->
    <div class="top">
    <el-carousel :interval="3000" height="400px" motion-blur>
      <el-carousel-item v-for="(image, index) in images" :key="index">
        <img
            :src="image.src"
            :alt="image.alt"
            class="carousel-image"
            @load="handleImageLoad(index)"
            @error="handleImageError(index)"
        height="500" width="100%"/>
      </el-carousel-item>
  </el-carousel>
     </div>
  </div>
</template>

<style scoped>
.pics{
  width: 90%;
  margin: 0 auto;
}
</style>